<template>
  <div class="ayasBox">
    <div class="ayasTitle">
      <span>统计数据</span>
      <svg-icon class="hover" class-name="search-icon" icon-class="tubiaoneiguanbi" @click="close" />
    </div>
    <div class="ayasContainer">
      <slot name="ayasContent">
      </slot>
    </div>
  </div>
</template>
<script setup>
  import {
    computed,
    reactive,
    watchEffect
  } from "vue";
  import * as echarts from 'echarts';
  import axios from "@/utils/request";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import {
    searchchannelNoList
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  const {
    proxy
  } = getCurrentInstance();
  const userStore = useUserStore();
  const props = defineProps({
    dataOption: {
      default: () => {},
    },
  });
  const emit = defineEmits(["close"]);
  // 重点
  const state = reactive({

  });
  // 关闭统计数据
  const close = () => {
    emit("close");
  };
</script>
<style lang="scss" scoped>
  .select {
    color: #4488ff !important;
    background-color: rgba(68, 136, 255, 0.16);
  }

  .ayasBox {
    padding: 16px;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(235, 247, 255, 1) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.6);

    .ayasTitle {
      display: flex;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          font-size: 16px;
          font-weight: 700;
          position: relative;
          padding-left: 10px;

          &::before {
            position: absolute;
            content: "";
            height: 16px;
            width: 4px;
            background-color: rgba(68, 136, 255, 1);
            top: 50%;
            transform: translateY(-50%);
            left: 0;
          }
        }
      }
    }

    .ayasContainer {
      height: calc(100% - 21px);
      overflow: auto;
    }

    .box_header {
      padding: 0 12px;
      height: 32px;
      background-color: #ecf4fe;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 16px;

      .title {
        font-weight: 700;
      }

      .filter {
        width: 120px;
        height: 22px;
        color: rgba(62, 70, 79, 1);
        font-size: 14px;
        font-weight: 700;
        display: flex;

        div {
          width: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
      }
    }

    .box_one {
      margin: 12px 0 0 0;
      height: 330px;

      .box_container {
        margin-top: 4px;
        height: 264px;
        display: flex;
        flex-direction: column;

        .item {
          margin: 8px 0 0 0;
          padding: 0 12px;
          height: 60px;
          border: 1px solid rgba(68, 136, 255, 0.08);
          border-radius: 4px;
          color: rgba(62, 70, 79, 0.6);
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;

          .place {
            color: rgba(62, 70, 79, 1);
          }
        }
      }
    }

    .box_two {
      height: 186px;

      .box_container {
        display: flex;
        justify-content: space-between;

        .item {
          width: 91px;
          height: 126px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;

          .desc {
            color: rgba(62, 70, 79, 1);
            font-size: 14px;
          }

          .data {
            font-size: 18px;
            font-weight: 700;
          }

          .alarmCount {
            color: #ff9900;
          }

          .cutCount {
            color: #ff5555;
          }

          .feedCount {
            color: #ee66bb;
          }
        }
      }
    }

    .box_three {
      height: 318px;

      .box_container {
        height: 242px;
      }
    }

    .box_four {
      height: 172px;

      .box_container {
        height: 100px;
      }
    }
  }
</style>